<template>
  <div class="box">
    <div class="friend-list">
      <div class="head">
        <div class="title" v-if="rankList&&type=='beOver'">
          <div class="number"></div>被好友超越啦
        </div>
        <div class="title" v-if="rankList&&type=='over'">
          超越好友啦
        </div>
        <img src="/static/fail.png" @click="close">
      </div>
      <div class="content">
        <div class="friend" v-if="type=='beOver'" v-for="(item,index) in rankList" :key="index">
          <img v-if="item.headImgUrl" :src="item.headImgUrl" alt="">
          <img v-else src="/static/default-head.png" alt="">
          <div class="name">{{item.nickname}}</div>
          <div class="card">{{item.cardNumber}}关</div>
        </div>
      </div>
      <button v-if="type=='beOver'" class="tell-btn" plain="true" @getuserinfo="getUserInfo($event)" open-type="getUserInfo" lang="zh_CN"><div></div>超过TA</button>
      <button v-else class="tell-btn" plain="true" open-type="share"><img src="/static/tell.png" alt="">告诉TA</button>
      <img v-if="type=='beOver'" class="rank" src="/static/rankBtn.png" @click="toRank">
      <!-- <img src="/static/rankBtn.png" alt="" @click="toRank"> -->
    </div>
    <div class="target" v-if="type=='over'&&nextFriend">
      <div class="head">下一个好友</div>
      <div class="friend">
        <img v-if="nextFriend.headImgUrl" :src="nextFriend.headImgUrl" alt="">
        <img v-else src="/static/default-head.png" alt="">
        <div class="name">{{nextFriend.nickname}}</div>
        <div class="card">{{nextFriend.cardNumber}}关</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  props: ["type","queryInfo","nextFriend","list"], // over 超越好友 ，beOver 被好友超越
  data() {
    return {};
  },
  computed: {
    ...mapState(["myRank", "rankList", "loginReady"])
  },
  methods: {
    ...mapMutations(["setUserInfo"]),
    getUserInfo(event) {
      //获取用户信息\
      let data = event.mp.detail.userInfo;
      this.setUserInfo(data);
      this.fly
        .post("/authorize", {
          nickName: data.nickName,
          avatarUrl: data.avatarUrl,
          gender: data.gender,
          city: data.city,
          province: data.province,
          country: data.country,
          userId: this.queryInfo.userId, //0(自己登陆)，其他则是邀请打开 this.$route.query.userId
          subjectId: this.queryInfo.subjectId
        })
        .then(res => {
          if (this.$route.query.userId != 0) {
            this.$route.query = {
              userId: 0, //分享者id
              subjectId: 0, //题目ID
              first: true
            };
          }
          this.$emit('close');
          this.$router.push("/pages/question/mainPlay");
        });
    },
    close() {
      this.$emit("close");
    },
    centerClick() {
      this.$emit("close");
    },
    toRank() {
      this.$emit("close");
      this.$router.push("/pages/rank/rankList");
    }
  }
};
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 5;
  top: 0;
  left: 0;
  background: rgba(#000, 0.4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.friend-list {
  width: 604rpx;
  padding-bottom: 24rpx;
  box-sizing: border-box;
  background: #fff;
  border-radius: 8rpx;
  position: relative;
  .head {
    width: 100%;
    height: 104rpx;
    padding: 0 0 0 42rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f46185;
    font-size: 44rpx;
    font-weight: bold;
    color: #fff;
    box-sizing: border-box;
    .title {
      display: flex;
      align-items: center;
      .number {
        font-size: 66rpx;
        font-weight: bold;
        color: #f8ea48;
        line-height: 1;
      }
    }
    img {
      width: 36rpx;
      height: 36rpx;
      padding: 42rpx;
    }
  }
}

.content {
  width: 100%;
  padding: 0 50rpx;
  background: #fff;
  min-height:350rpx;
  max-height:570rpx;
  overflow: scroll;
  box-sizing: border-box;
}
.friend {
  width: 100%;
  height: 114rpx;
  display: flex;
  align-items: center;
  border-bottom: 2rpx solid #eeeeee;
  position: relative;
  font-size: 30rpx;
  font-weight: bold;
  img {
    width: 68rpx;
    height: 68rpx;
    border-radius: 50%;
    margin-right: 30rpx;
  }
  .name {
    // font-size: 30rpx;
    color: #aaaaaa;
    // font-weight: bold;
  }
  .card {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #f46087;
  }
}
.tell-btn {
  width: 236rpx;
  height: 72rpx;
  margin: 24rpx auto 0 auto;
  line-height: 72rpx;
  text-align: center;
  font-size: 30rpx;
  color: #fff;
  background: #f46087;
  border-radius: 8rpx;
  border: none;
  display: flex;
  align-items: center;
  img {
    width: 37rpx;
    height: 37rpx;
    vertical-align: middle;
    margin-right: 10rpx;
  }
  &> div {
    width: 50rpx;
    height: 50rpx;
    margin-right: 10rpx;
    background-size: 100%;
    background-color: transparent;
    background-image:
    url(
    "");
  }
}
.rank {
  height: 60rpx;
  width: 60rpx;
  position: absolute;
  bottom: 30rpx;
  right: 40rpx;
}
.target {
  width: 600rpx;
  padding: 0 50rpx 24rpx 50rpx;
  background: #fff;
  margin-top: 168rpx;
  border-radius: 8rpx;
  box-sizing: border-box;
  .friend{
    border: none;
    height: 68rpx;
  }
  .head {
    padding: 36rpx 0;
    font-size: 28rpx;
    color: #f46185;
    font-weight: bold;
    line-height: 1;
    text-align: center;
  }
}
</style>
